// 分页显示
// 加载层
let index = layer.load(0,{
  shade:['.5','#ccc']
})
// ajax请求数据
$.ajax({
  url:'../server/list.php',
  dataType:'json',
  success(res){
    // 结构获取数据
    let {data} = res;
    layui.use(['laypage', 'layer'], function(){
      var laypage = layui.laypage
      //调用分页
      laypage.render({
        elem: 'page'
        ,count: data.length
        ,limit:8
        ,layout: ['count', 'prev', 'page', 'next','limit', 'skip']      
        ,limits:[4,8,12]
        ,prev:'后退一页'
        ,next:'前进一页'
        ,first:'首页'
        ,last:'尾页'
        ,jump: function(obj){
          //模拟渲染
          let res = (function(){
            var arr = []
            ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
            layui.each(thisData, function(index, item){
              // console.log(item);
              arr.push(`
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${item.imgpath.split('==========')[0]}" alt="...">
                    <div class="caption">
                        <h3>${item.name}</h3>
                        <p class='introduce'>${item.introduce}</p>
                        <p>
                            <!-- 在标签上记录商品的id，方便于单击的时候可以获取到  -->
                            <a href="#" data-id='${item.id}' class="btn btn-default click" role="button">查看详情</a>
                        </p>
                    </div>
                  </div>
              </div>              
              `);
            });
            return arr.join('');
          })();
          $('#list').html(res);
          // 渲染结束关闭加载层
          layer.close(index);
        }
      });  
    });
  }
})

// 使用事件委托
$('#list').on('click','.click',function(){
  // H5中的获取自定义属性(data-xxx)的api
  // 获取对应的自定义属性值： DOM.dataset.xxx
  // console.log(this.dataset.id);


  // 为了在详情页中可以获取到点击的商品id
  // 可以将id存储在sessionStorage
  sessionStorage.setItem('id',this.dataset.id)
  // 跳转至详情页
  location.href = './detail.html';
})